<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 自定义组件 my-component 的使用 -->
			<my-component></my-component>
		</div>
		<!-- 定义一个模板，用于自定义组件 my-component -->
		<template id="temp">
			<div>
				<h1>这是 template 元素，在外部定义的组件结构。</h1>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/**
			 * 定义一个名为 Child 的对象，包含组件的模板信息
			 */
			var Child = {
				template: '#temp'
			}
			/**
			 * 创建一个新的 Vue 实例
			 * 将实例挂载到具有 id 为 'app' 的元素上
			 * 注册名为'my-component'的组件，其定义为 Child 对象
			 * 初始化数据为空
			 */
			new Vue({
				el: "#app",
				components: {
					'my-component': Child
				},
				data: {

				}
			})
		</script>

	</body>
</html>